<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE HTML>
<html>
<head>
    <title>Title</title>
    <meta charset="UTF-8">
    <script src="<%=request.getContextPath()%>/jquery-1.10.2.min.js"></script>
    <script>
    $(function () {
        $("form").submit(function () {//表单提交事件
            // var ip=$("[name=ip]").val()
            var ip = $("#ip").val()
            var reg = /^(\d{1,3}\.){3}\d{1,3}$/
            if (!reg.test(ip)) {
                $("#ip").css("border", "1px solid red");//把边框变红色
                return false;//表单不会提交
            }
            var nums = ip.split("\.");
//            for(var i=0;i<nums.length;i++){
//
//            }
            //function中的i是索引，o就是nums[i]
            var check = true;
            $.each(nums, function (i, o) {
                var n = parseInt(o);//字符串转化成数字
                if (n < 0 || n > 255) {
                    $("#ip").css("border", "1px solid red");//把边框变红色
                    check = false;
                    return;
                }
            })
            return check;
        })
        $("#addr,#port").change(function () {
            // alert($(this).val())
            var addr = $("#addr").val()
            var port = $("#port").val()
            //校验
            var reg = /^([a-zA-Z0-9]([a-zA-Z0-9\-]{0,61}[a-zA-Z0-9])?\.)+[a-zA-Z]{2,6}$/;
            if (!reg.test(addr)) {//校验不通过
                $("#sbtn").prop("disabled", true)//禁用提交按钮
                return;
            }
            //1~5位数，并且要小于65535，否则非法
            if (!/^\d{1,5}$/.test(port) || parseInt(port) > 65535) {
                $("#sbtn").prop("disabled", true)//禁用提交按钮
                return;
            }
            $.ajax({
                url: "<%=request.getContextPath()%>/domain?act=check",
                data: "addr=" + addr + "&port=" + port+"&id="+$("[name=id]").val(),
                method: "post",
                success: function (res) {
                    //如果res是object,代表是json对象，可以直接用.属性拿到值
                    //如果res是字符串，不能直接得到属性
                   // alert(res)
                   // res=JSON.parse(res);//把字符串转化成对象
                    //alert(res.success)
                    if(res.success){
                        $("#sbtn").prop("disabled",false)//启用按钮
                    }else{
                        $("#sbtn").prop("disabled",true)//禁用按钮
                        $("#msg").html(res.message)
                    }
                }
            })

        })
    })
    </script>
</head>
<body>
<form action="<%=request.getContextPath()%>/domain?act=edit" method="post">
    <input value="${domain.id}" name="id" type="hidden">
    <table border="1" cellspacing="0">
        <tr>
            <td>域名</td>
            <td><input name="addr" id="addr" value="${domain.addr}"></td>
        </tr>
        <tr>
            <td>端口</td>
            <td><input name="port" id="port" value="${domain.port}"></td>
        </tr>
        <tr>
            <td>IP</td>
            <td><input name="ip" id="ip" value="${domain.ip}"></td>
        </tr>
        <tr>
            <td>状态</td>
            <td>
                <input type="radio" name="status" value="1" ${domain.status==1?'checked':''}>启用
                <input type="radio" name="status" value="0" ${domain.status==0?'checked':''}>禁用
            </td>
        </tr>
        <tr>
            <td colspan="2" align="center">
                <%--submit按钮，需要监听的是表单的submit事件，不可以监听submit按钮的onclick事件--%>
                <%--button按钮，需要监听按钮的click事件，在函数中手动提交表单$("form").submit()--%>
                <input type="submit" value="提交" id="sbtn">
            </td>
        </tr>
    </table>
    <span id="msg">${message}</span>
</form>
</body>
</html>
